<template>
  <div>
		<myheader></myheader>
		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul>
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<div class="carousel-item active">


				<!-- 轮播图 -->
				<Carousel @click="clickimg" @change="changeimg" pageTheme='circle' :datas='imgs'></Carousel>
				</div>
				
				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品分类</h3>
				<div class="row">
					<div class="col-sm-6 col-md-3 col-product" v-for="(item,index) in goodslist" :key='index'>
						<figure>
							<img :src="'http://127.0.0.1:8000/static/upload/'+item.img" class="rounded-corners img-fluid" 	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item?id='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">￥{{item.price}}</span></p>
					</div>
				</div>

				<div>
					<!-- 简单版分页容器 -->
					<Pagination @change="get_goods" v-model="pagination" layout="pager,jumper" ></Pagination>
				
				</div>

				<!-- 根据要求排序 -->
				<div>
          		<Button @click="get_goods('page','price','')">价格正序</Button>
          		<Button @click="get_goods('page','price','-')">价格倒序</Button>
      			</div>

			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader.vue'

export default {
  data () {
    return {
		//分页器变量
		pagination:{
			//当前页
			page:1,
			//一页展示多少条数据
			size:4,
			//一共多少数据,从后端接口获取
			total:''
		},
		//商品列表
		goodslist:[],


      msg: "这是一个变量",
	  //轮播图图片
	  imgs:[
		  {
			  title:'广告活动页',
			  link:'https://www.baidu.com/',
			  image:'http://localhost:8080/static/img/placeholder-jacket.f5996c6.png'
		  },
		   {
			  title:'广告活动页',
			  link:'https://163.com/',
			  image:'http://localhost:8080/static/img/placeholder-product.1011f1b.jpg'
		  }
	  ]
    }
  },
  mounted:function(){
	//   this.get_carousel()
	//   this.change_back()
	  this.get_goods()
  },
  methods:{
	  //商品展示,排序参数
	get_goods(page,coloum,order){

      this.axios.get('http://localhost:8000/goodslist/',{params:{order:order,coloum:coloum,page:this.pagination.page,size:this.pagination.size}})
      .then(a=>{
		  console.log(a)
		  this.goodslist=a.data.message
		  this.pagination.total=a.data.total

      })
    },




	  //切换主题颜色
	 change_back(){

		 //获取样式表
		 var styles = getComputedStyle(document.documentElement);

		 //动态更改
		 document.documentElement.style.setProperty('--bg-color','skyblue')
	 },


	  //点击轮播图
	  clickimg(index,data){
		  //跳转
		  window.location.href = data.link

	  },
	  //切换轮播图
	  changeimg(index,data){
		//   console.log(data)
	  },
	  //获取轮播图接口
	  get_carousel:function(){
		this.axios.post('http://127.0.0.1:8000/getcarousel/')
		.then(a=>{
			console.log(a)
			var mylist = []
			for(let i=0,l=a.data.length;i<l;i++){
				console.log(a.data[i])
				mylist.push({title:a.data[i].name,link})
			}

		})

	  }
	  

     
  },
  components:{
	  	  'myheader':myheader
  }
}


</script>
 
<style>



</style>